<template>
  <div class="repair-container">
    <el-card class="repair-card">
      <h2 class="repair-title">学生报修</h2>
      <el-form ref="repairForm" :model="repairForm" label-width="100px" class="repair-form">
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="repairForm.deviceType" placeholder="选择设备类型">
            <el-option label="空调" value="airConditioner"></el-option>
            <el-option label="暖气" value="heating"></el-option>
            <el-option label="电风扇" value="fan"></el-option>
            <el-option label="照明" value="lighting"></el-option>
            <el-option label="门锁" value="doorLock"></el-option>
            <el-option label="窗户" value="window"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障描述" prop="faultDescription">
          <el-input type="textarea" v-model="repairForm.faultDescription" placeholder="请输入故障描述"></el-input>
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgencyLevel">
          <el-radio-group v-model="repairForm.urgencyLevel">
            <el-radio label="1">一般</el-radio>
            <el-radio label="2">紧急</el-radio>
            <el-radio label="3">非常紧急</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRepair" class="repair-button">提交报修</el-button>
        </el-form-item>
      </el-form>

      <el-button type="text" @click="fetchRepairHistory" class="view-history-button">查看报修记录</el-button>

      <!-- 显示报修记录 -->
      <el-table :data="repairHistory" style="width: 100%" v-if="repairHistory.length > 0">
        <el-table-column label="设备类型" prop="deviceType"></el-table-column>
        <el-table-column label="故障描述" prop="faultDescription"></el-table-column>
        <el-table-column label="紧急程度" prop="urgencyLevel"></el-table-column>
        <el-table-column label="报修时间" prop="createdAt"></el-table-column>
        <el-table-column label="处理状态" prop="status"></el-table-column>
      </el-table>
      <div v-else class="no-history">暂无报修记录</div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      repairForm: {
        deviceType: "",
        faultDescription: "",
        urgencyLevel: "1"
      },
      repairHistory: []
    };
  },
  methods: {
    async submitRepair() {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.post(
            "http://localhost:3000/repair",
            this.repairForm,
            {
              headers: {
                Authorization: token
              }
            }
        );
        this.$message.success(response.data.message || "报修成功");
      } catch (err) {
        let errorMessage = "报修失败";
        if (err.response && err.response.data) {
          errorMessage = err.response.data.message || errorMessage;
        }
        this.$message.error(errorMessage);
      }
    },
    async fetchRepairHistory() {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.get("http://localhost:3000/repair/history", {
          headers: {
            Authorization: token
          }
        });
        this.repairHistory = response.data;
      } catch (err) {
        this.$message.error("获取报修记录失败");
      }
    }
  }
};
</script>

<style scoped>
.repair-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #f9f9f9;
  padding: 20px;
}

.repair-card {
  width: 500px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.repair-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.repair-form {
  padding: 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-select, .el-radio-group {
  border-radius: 8px;
  height: 40px;
}

.repair-button {
  width: 100%;
  height: 45px;
  border-radius: 22px;
  background-color: #42a5f5;
  color: #ffffff;
}

.view-history-button {
  margin-top: 20px;
}

.no-history {
  text-align: center;
  color: #888;
}
</style>
